﻿<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"/>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="description" content=""/>
		<meta name="author" content=""/>

		<title>IYTE PRT</title> 

		<link href="assets/css/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
		
		<script src="assets/js/jquery-1.9.1.min.js" type="text/javascript"></script> 
		<script src="assets/js/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
		
		<script language="javascript" type="text/javascript">
			var SERVER_IP = 'localhost';
			var CMD_SERVER = SERVER_IP + ':85';
			var STATIONS_URL = 'http://'+ SERVER_IP + '/Phonegap/Stations.php';
			
			/**
			 * Send CALL request to server for selected station .
			 * @param stationId: selected station id
			 */
			function sendCallRequest(stationId){	
				var call_prt = "CALL";
				var path = "http://"+CMD_SERVER+"/"+ stationId + "/"+call_prt+"/";
					$.get(path,function(){
						alert("İstek gönderildi.");
					});
			}
			
			/**
			 * Get station list from server and fill select element "selectSt"
			 */
			function getStationList() {
				$.ajax({
					url: STATIONS_URL,
					type:'GET',
					dataType: 'json',
					success: function( json ) {
						console.log("json: " + json);
						$.each(json, function(i, value) { 
							text = "Station " + (i+1);
							$('<option></option>', {html:value}).attr('value', value).text(text).appendTo('#selectSt');
						});
					},
					error: function( e ) {
						console.log("error : " + JSON.stringify(e));
					}
				});
			}

			/* On document ready */
			$(document).ready(function() {
				
				/* Init button action */
				$('#callPodcar').on('click', function() {
					var selectedStationId = $('#selectSt').val();
					sendCallRequest(selectedStationId);
				});
				getStationList();
			});
		</script>
	</head>
	<body>
		<div data-role="page" class="section" id="page1">
			<div class="header" data-role="header">
				<h1>Call PodCar</h1>
			</div>

			<div class="content" data-role="content" id="content" >
				<div id="car">
					<select name="selectSt" class="span12" id="selectSt" ></select>                                         
				</div>
				<div id="cinfo"></div>
				<button id="callPodcar">Call Podcar</button>
			</div>
			<div class="footer" data-role="footer">
				<h1>IYTE PRT&copy;</h1>
			</div>
		</div>
	</body>
</html> 